<template>
  <div class="home">
      <h1>我是列表页</h1>
      <div> 
         show the store: 
         {{ $store.state.version }}   <br />
         {{ $store.state.balance }}
         <button @click="by10">修改余额 +10</button>
         <button @click="by1">修改余额 +1</button>
         <button @click="increment()"> 修改余额通过mapMutations的函数</button>
      </div>
        <div style="border:1px solid red">
            <div> pinia</div>
            <!-- {{ orderNum }}
            {{ orderState }} -->
            {{ orderStore }}
            {{ orderTxt }}

            <button @click="setOrderState(3)"> 修改订单状态</button>
      </div>
      <router-link to="/detail/123" replace>跳转内容页 by replace</router-link> <br/>
       <router-link to="/detail/123" >跳转内容页 by push</router-link> <br/>
      <button @click="toDetail"> 跳转到内容页 by 编程式导航</button>
  </div>
</template>

<script>
import { mapMutations} from 'vuex'
import { useOrderStore } from '@/pinia/order';
import { mapState,mapActions } from 'pinia';
export default {
  name: 'List',
  methods:{
    toDetail(){
         this.$router.push({name:'detail',params:{ acid:3333 ,a:1,b:true,c:[1,2,3]} });


        // 替换跳转
        // this.$router.replace({name:'detail',params:{ acid:3333 ,a:1,b:true,c:[1,2,3]} });
    },
    by10(){
      // 在配置api当中的函数 可以直接通过 this.$store来访问全局store对象
      this.$store.commit('increment',10)
    },
    by1(){
      this.$store.commit('increment')
    },
    // mapMutations 把vuex当中的mutations直接提供给当前的组件使用
    ...mapMutations(['increment']),
    /// pinia 当中的 mapActions 把actions的函数遍历在当前的组件中直接使用
    ...mapActions(useOrderStore,['setOrderState'])
  },
  computed:{
    // pinia当中也有mapState的辅助函数
    // 第一个参数是 从那个store当中获取内容
    // 第二个参数就是具体去 要从store当中获取什么具体的内容
    ...mapState(useOrderStore,{
      orderStore: state=>({ 
        orderNum:state.orderNum,
        orderState: state.orderState
      }),
      orderTxt: state=>state.orderTxt
    })
    // ...mapState(useOrderStore,['orderNum','orderState','orderTxt'])
  },  
  mounted(){
    // this.$route 会得到所有的当前的路由信息
    console.log('$route in list',this.$route);
  },
  beforeRouteLeave(to,from,next){
        // 只有return false 才标识取消
       const { path ,name} = to;
      
       if( name=='detail' || path=="/"  || path=="/index" ) return next()

  }

}
</script>
